<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>小说类型</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="layui/css/layui.css">
	<!-- 引入 Element UI 样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>

<div id="app">

	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>小说类型</legend>
	</fieldset>

	<div class = "admin-form">
		<el-form :inline="true" :model="category" class="demo-form-inline" style="margin-left: 100px;">
			<el-form-item label="类型"   >
				<el-input v-model="category.categoryName" placeholder="类型"></el-input>
			</el-form-item>


			<el-form-item style=" margin-left: 100px;">
				<el-button   type="primary" @click="onSubmit">添加小说类型</el-button>
			</el-form-item>
		</el-form>
	</div>

	<template>
		<el-table
				:data="tableData"
				style="width: 600px; margin-left: 100px; "
				 >
			<el-table-column
					fixed
					prop="categoryId"
					label="ID"
					width="150">
			</el-table-column>
			<el-table-column
					prop="categoryName"
					label="小说类型"
					width="200">
			</el-table-column>

			<el-table-column
					fixed="right"
					label="操作"
					width="120">
				<template slot-scope="scope">
					<el-button @click="dlt(scope.row)" type="text" size="small">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
	</template>

</div>


<!-- 引入 Vue.js 和 Element UI 的脚本 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
<script>

	var v = new Vue({
		el: '#app',
		data(){
			return {
				category: {
					categoryName: '',

				},
				tableData: [{
					categoryId: 1,
					categoryName: '玄幻',

				 }],
			}
		},
		methods: {
			onSubmit() {
				axios.post('category/add', this.category).then(res => {
					if(res.data == 1){
						alert("添加成功");
						this.select();

					}
				})
			},
			select() {
				axios.get('category/select').then(res => {
					this.tableData = res.data;
				});
			},
			dlt(row) {
				row.dlt = 0;
				axios.post('category/delete', row).then(res => {

					if(res.data ==    1){
						alert("删除成功");
						this.select();
					}
				})
			}
		},
		mounted() {
				this.select();

		}

	});



</script>
</body>
</html>
